<template>
  <tool-page title="生成随机日期" :value="value" @generate="generate" :remark="remark">
    <template #extra>
      <Row justify="center" style="margin-top: 20px">
        范围：
        <DatePicker type="datetimerange" split-panels placeholder="选择日期范围" style="width: 340px" @on-change="onDateChane"
                    clearable></DatePicker>
      </Row>
      <Row justify="center" align="center" style="margin-top: 20px">
        格式：
        <i-select v-model="format" @on-change="onFormatChange" style="width: 240px">
          <i-option value="yyyy-MM-dd HH:mm:ss" label="年-月-日 时-分-秒"></i-option>
          <i-option value="yyyy/MM/dd HH:mm:ss" label="年/月/日 时:分:秒"></i-option>
          <i-option value="yyyy年MM月dd日 HH:mm:ss" label="年年月月日日 时:分:秒"></i-option>
          <i-option value="yyyy年MM月dd日 HH时mm分ss秒" label="年年月月日日 时时分分秒秒"></i-option>
          <i-option value="yyyy MM dd HH:mm:ss" label="年 月 日 时:分:秒"></i-option>
          <i-option value="yyyyMMdd HHmmss" label="年月日 时分秒"></i-option>
          <i-option value="yyyyMMddHHmmss" label="年月日时分秒"></i-option>
          <i-option value="yyyyMMdd" label="年月日"></i-option>
          <i-option value="yyyy年MM月dd日" label="年年月月日日"></i-option>
          <i-option value="HHmmss" label="时分秒"></i-option>
          <i-option value="HH时mm分ss秒" label="时时分分秒秒"></i-option>
          <i-option value="yyyy年" label="年"></i-option>
          <i-option value="MM月" label="月"></i-option>
          <i-option value="dd日" label="日"></i-option>
          <i-option value="HH时" label="时"></i-option>
          <i-option value="mm分" label="分"></i-option>
          <i-option value="ss秒" label="秒"></i-option>
          <i-option value="timestamp" label="时间戳"></i-option>
        </i-select>
      </Row>
    </template>
  </tool-page>
</template>

<script>
export default {
  name: "RandDate",
  data() {
    return {
      value: '',
      dateRange: [null, null],
      remark: "默认生成从1970年1月1日到现在的随机日期，可自定义生成范围",
      format: 'yyyy-MM-dd HH:mm:ss'
    }
  },
  methods: {
    generate() {
      const simpleUtils = this.simpleUtils;
      const randomDate = this.simpleUtils.randomDate(this.dateRange[0], this.dateRange[1]);
      if (this.format === "timestamp") {
        this.value = randomDate.getTime().toString();
      } else {
        this.value = simpleUtils.formatDateTime(randomDate, this.format);
      }
    },
    onDateChane(range) {
      this.dateRange = range;
      this.generate();
    },
    onFormatChange() {
      this.generate();
    }
  },
  created() {
    this.generate();
  }
}
</script>

<style scoped>

</style>
